export class LoginPage {
    constructor(router) {
        this.router = router;
        this.container = document.createElement('div');
        this.render();
        this.bindEvents();
    }

    render() {
        this.container.className = 'login-container';
        this.container.innerHTML = `
            <div class="login-box">
                <h2>欢迎回来</h2>
                <form id="loginForm">
                    <div class="form-group">
                        <label for="username">用户名</label>
                        <div class="input-wrapper">
                            <input type="text" id="username" name="username" placeholder="请输入用户名" required>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="password">密码</label>
                        <div class="input-wrapper">
                            <input type="password" id="password" name="password" placeholder="请输入密码" required>
                        </div>
                    </div>
                    <button type="submit">
                        <span>登录</span>
                    </button>
                    <p class="register-link">还没有账号？<a href="#" id="registerLink">立即注册</a></p>
                </form>
            </div>
        `;
        return this.container;
    }

    bindEvents() {
        const loginForm = document.getElementById('loginForm');
        const registerLink = document.getElementById('registerLink');

        loginForm.addEventListener('submit', (e) => {
            e.preventDefault();
            const username = document.getElementById('username').value;
            const password = document.getElementById('password').value;
            this.handleLogin(username, password);
        });

        registerLink.addEventListener('click', (e) => {
            e.preventDefault();
            this.router.navigate('/register');
        });

        // 添加输入框焦点效果
        const inputs = document.querySelectorAll('input');
        inputs.forEach(input => {
            input.addEventListener('focus', () => {
                input.parentElement.classList.add('focused');
            });
            input.addEventListener('blur', () => {
                if (!input.value) {
                    input.parentElement.classList.remove('focused');
                }
            });
        });
    }

    async handleLogin(username, password) {
        try {
            // 这里应该调用实际的登录 API
            console.log('登录信息:', { username, password });
            // 模拟登录成功
            localStorage.setItem('isLoggedIn', 'true');
            this.router.navigate('/');
        } catch (error) {
            console.error('登录失败:', error);
            alert('登录失败，请重试');
        }
    }
} 